<script lang='ts' setup>
import Title from '@/components/标题.vue'
import type { CollegeIntroduce } from '@/types'
import axios from "@/assets/工具/网络请求"
import { onMounted, ref } from 'vue';
import { getPicture } from '@/assets/工具/工具类';
const mainContent = ref({} as CollegeIntroduce)
onMounted(
    async() =>{
        try{
            const response = await axios.doGet('/CollegeIntroduceServlet');
            mainContent.value = response.data;
            console.log(mainContent.value.bottomImage);
            console.log(mainContent.value.cover);
            
            
        }catch(error){
            console.error('请求出错：',error)
        }
        
    }

)

const textFormat = (texts: string[]) => "&emsp;&emsp;" + texts.join("<br>&emsp;&emsp;")
</script>
<template>
    <div class="组件根元素">
        <Title title="学校简介" />
        <img :src="getPicture(mainContent.cover)" class="块级图片" id="封面图">
        <ul>
            <li v-for="content of mainContent.contents" :key="content.id">
                <div class="文案标题">
                    <div class="标题文字">
                        {{ content.title }}
                    </div>
                </div>
                <div class="文案" v-html="textFormat(content.texts)">
                </div>
                <div class="校训" v-if="content.motto">
                    {{ content.motto }}
                </div>
            </li>
        </ul>
       
        <img  :src="getPicture(mainContent.bottomImage)" class="块级图片" id="底部背景图">
       
    </div>
</template>


<style scoped>
.组件根元素{
    background: #FFF;
}
.校训{
    color: rgba(17, 34, 51, 1);
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    margin-top: 20px;
}
.文案{
    color: rgba(85, 85, 85, 1);
    font-size: 16px;
    padding: 0 16px;
    text-align: justify;
    line-height: 24px;
    position: relative;
    z-index: 1;
}
.标题文字{
    background-color: #DDEEFC;
    width: fit-content;
    margin:auto;
    letter-spacing: 4px;
}
#封面图{
    width: 375px;
}
#底部背景图{
    width: 375px;
    position: relative;
    top: -70px;
}
.文案标题{
    text-align: center;
    height: 52px;
    background-image: url('@/assets/图片/校园/校园简介文案标题.png');
    background-size: 100% 100%;
    line-height: 52px;
    font-size: 18px;
    font-weight: bold;
    margin:20px 0 15px
}
</style>
